// 导入 Vue 构造函数
import Vue from "vue";
// 导入css样式，
import "normalize.css/normalize.css"; // A modern alternative to CSS resets
// 一次性导入组件库
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
// 英文语言包
import elementEN from "element-ui/lib/locale/lang/en"; // lang i18n
import elementZH from "element-ui/lib/locale/lang/zh-CN"; // lang i18n
import customEN from "./lang/en";
import customZH from "./lang/zh";

import "@/styles/index.scss"; // global css

import App from "./App";
import store from "./store";
import router from "./router";

import "@/icons"; // icon
// 权限控制模块
import "@/permission"; // permission control

import "@/directive";
// 注册ElementUI
// Vue.use(ElementUI, { locale });
// 如果想要中文版 element-ui，按如下方式声明
Vue.use(ElementUI);
// 导入打印模块
import VuePrint from "vue-print-nb";
Vue.use(VuePrint);
// 全局注册组件
import PageHeader from "@/components/PageHeader";
import UploadExcel from "@/components/UploadExcel";
import UploadImage from "@/components/UploadImage";
import ScreenFull from "@/components/ScreenFull";
import ThemePicker from "@/components/ThemePicker";
import Lang from "@/components/Lang";
import TagsView from "@/components/TagsView";
Vue.component(PageHeader.name, PageHeader);
Vue.component(UploadExcel.name, UploadExcel);
Vue.component(UploadImage.name, UploadImage);
Vue.component(ScreenFull.name, ScreenFull);
Vue.component(ThemePicker.name, ThemePicker);
Vue.component(Lang.name, Lang);
Vue.component(TagsView.name, TagsView);
Vue.config.productionTip = false;
Vue.prototype.$chenkPerm = function(item) {
    // 拿到vuex中points
    return store.getters.points.includes(item);
};

// 多语言切换
// 1.下包 yarn add vue-i18n@8.22.2 -S
// 2.引入
import VueI18n from "vue-i18n";
// 3.注册
Vue.use(VueI18n);
// 4.定义翻译规则
const messages = {
    // 英文
    en: {
        ...elementEN, // 将饿了么的英文语言包引入
        ...customEN,
    },
    // 中文
    zh: {
        ...elementZH, // 将饿了么的中文语言包引入
        ...customZH,
    },
};
// 5.创建i18n实例
import Cookies from "js-cookie";
// 6.注入
const i18n = new VueI18n({
    locale: Cookies.get("language") || "zh", //默认的语言
    messages, //翻译规则
});
// 实例化 VM 实例
new Vue({
    // el: "#app",
    router,
    store,
    i18n, // 提供全局的 $t 方法，进行语言的翻译
    //染函数，把根组件App的内容染到id=app的盒子位置
    // id=app盒子在public/index,html文件中
    render: (h) => h(App),
}).$mount("#app");

// 页面/路由的访问权的核心实现思路:
// 1.主页的左侧菜单是基于路由表动态生成的(控制左侧菜单的不同只需要控制路由表即可)
// 2.路由表划分为静态路由表和动态路由表，控制权限的不同就是在控制动态路由表
// 3.在路由全局全局守卫中，基于请求到的用户菜单，对动态路由表做筛选(比对路由规则的名字是否在用户菜单数组中)
// 4.把筛选的结果通过路由实例的addRoute方法动态追加到路由表中(浏览器输入path可以看到component)
// 5.通过vuex管理一份路由表，同步相应菜单的显示(因为router.options.routes不是响应式的)

//按钮的操作权:
// (1) 3种实现方式:
//     1.是否染(v-if指令)
//     2.是否禁用(: disabled属性)
//     3.代码中的逻辑判断(有权限放行，否则直接return)
// (2) 代码中
//    1.自定义全局指令(v-指令名)
//      判断指令绑定表达式的值是否在vuex中用户权限点的数组中
//    2.给Vue新增原型方法($原型方法名)
//      判断方法参数值是否在vuex中的用户权限点的数组中